<!--首页中间部分组件-->
<template>
  <div class="alldiv">
    <!-- 滑动广告 -->
    <div
      class="ad-container"
      v-show="determineAdStatus(advertisement.display_flag)"
      @mouseenter="stopAd()"
      @mouseleave="startAd()"
      :style="{ display: display,top:top,left:left }"
    >
      <div class="ad-inner">
      <button class="close-button" @click="closeAdvertisement">×</button>
      <a
        :href="formatAdvertisementLink(advertisement.advertisement_link)"
        target="_blank"
      >
        <img
          id="ad-image"
          :src="advertisement.advertisement_url"
          :width="advertisement.width"
          :height="advertisement.height"
          alt="滑动广告"
        />
      </a>
      </div>
    </div>
    <div class="Rotation">
      <RotationPicture></RotationPicture>
    </div>

    <div class="allblock">
      <div class="firstline">
        <CollegeNews></CollegeNews>
      </div>

      <div class="segmentation">
        <img src="../assets/分割图.png" />
      </div>

      <div class="secondline">
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[1]"
            :message="homePageSubColumns[1].name"
            :subcolumn_id="homePageSubColumns[1].subcolumn_id"
            :path="homePageSubColumns[1].path"
            :imageurl="require('../assets/工作状态.png')"
          ></HomeInfoBlock>
        </div>
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[2]"
            :message="homePageSubColumns[2].name"
            :subcolumn_id="homePageSubColumns[2].subcolumn_id"
            :path="homePageSubColumns[2].path"
            :imageurl="require('../assets/学术活动.png')"
          ></HomeInfoBlock>
        </div>
      </div>

      <div class="thirdline">
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[3]"
            :message="homePageSubColumns[3].name"
            :subcolumn_id="homePageSubColumns[3].subcolumn_id"
            :path="homePageSubColumns[3].path"
            :imageurl="require('../assets/本科生重要信息.png')"
          ></HomeInfoBlock>
        </div>
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[4]"
            :message="homePageSubColumns[4].name"
            :subcolumn_id="homePageSubColumns[4].subcolumn_id"
            :path="homePageSubColumns[4].path"
            :imageurl="require('../assets/研究生重要信息.png')"
          ></HomeInfoBlock>
        </div>
      </div>
      <div class="fourthline">
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[5]"
            :message="homePageSubColumns[5].name"
            :subcolumn_id="homePageSubColumns[5].subcolumn_id"
            :path="homePageSubColumns[5].path"
            :imageurl="require('../assets/本科生工作.png')"
          ></HomeInfoBlock>
        </div>
        <div class="homeinfoblock">
          <HomeInfoBlock
            v-if="homePageSubColumns.length > 0 && homePageSubColumns[6]"
            :message="homePageSubColumns[6].name"
            :subcolumn_id="homePageSubColumns[6].subcolumn_id"
            :path="homePageSubColumns[6].path"
            :imageurl="require('../assets/研究生工作.png')"
          ></HomeInfoBlock>
        </div>
      </div>
      <div class="fifthline">
        <div class="homeinfoblock">
          <ParentColumnHomeInfoBlock :column_id="11" :imageurl="require('../assets/党务专栏.png')">

          </ParentColumnHomeInfoBlock>

        </div>
        <div class="homeinfoblock">
          <ParentColumnHomeInfoBlock :column_id="4" :imageurl="require('../assets/学生工作.png')">

          </ParentColumnHomeInfoBlock>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
import service from "@/utils/service";
import RotationPicture from "@/components/RotationPicture";
import HomeInfoBlock from "@/components/HomeInfoBlock";
import ParentColumnHomeInfoBlock from "@/components/ParentColumnHomeInfoBlock.vue";

import CollegeNews from "@/components/CollegeNews.vue";
import { mapGetters, mapState } from "vuex";

export default {
  components: {
    RotationPicture,
    HomeInfoBlock,
    CollegeNews,
    ParentColumnHomeInfoBlock,
  },
  data() {
    return {
      advertisement: {},
      display: "block",
      top:'0px',
      left:'0px',
      timeInveral:null,
    };
  },
  computed: {
    ...mapState(["subColumns", "parentColumns"]),
    ...mapGetters(['homePageSubColumns']),
  },
  methods: {
    //异步请求获取滑动广告信息
    async getSildeAdvertisement() {
      try {
        const apiUrl = "/advers/getadver";
        const response = await service.get(apiUrl);

        if (response.data.code === 20041) {
          this.advertisement = response.data.data;

          if (this.advertisement.display_flag === 1) {
            console.log("开始启动动画");
            this.move();


          }
        }
      } catch (error) {
        console.log("获取滑动广告出错");
      }
    },

    move(){
      let iw = this.advertisement.width;
      let ih = this.advertisement.height;
      let ws = parseInt(this.left);//当前图片与浏览器页面左边框距离
      let hs = parseInt(this.top);//当前图片与浏览器页面上边框距离
      let screenw = window.innerWidth;//浏览器页面宽度
      let screenh = window.innerHeight;//浏览器高度
      let cw = screenw - iw;//图片left属性最大值
      let ch = screenh - ih;//图片top属性最大值
      let wss = 1;//每次水平移动距离
      let hss = 1;//每次垂直移动距离
      //启动定时器
      this.timeInveral = setInterval(() => {
        ws += wss; hs += hss;
        if (hs > ch) {
          hs = ch; hss = -hss;
        }
        if (hs <= 0) {
          hss = -hss;
        }
        if (ws > cw) {
          ws = cw; wss = -wss;
        }
        if (ws <= 0) {
          wss = -wss;
        }
        this.top = hs + "px";
        this.left = ws + "px";
      }, 15);
    },
    stopAd(){
      clearInterval(this.timeInveral);
    },
    startAd(){
      this.move();
    },


    //决定滑动广告状态
    determineAdStatus(flag) {
      if (flag === 1) {
        return true;
      } else if (flag === 0) {
        return false;
      }
    },


    //格式化滑动广告链接
    formatAdvertisementLink(link) {
      // 如果链接为有效字符串
      if (link && typeof link === "string") {
        // 如果链接已经包含了协议，直接返回
        if (link.startsWith("http://") || link.startsWith("https://")) {
          return link;
        }

        // 否则，默认添加 http:// 协议
        return "http://" + link;
      }

      // 如果链接为空或不是字符串，返回一个默认值或者其他处理方式
      return "#"; // 或者其他默认值，根据需求处理
    },
    //临时关闭广告
    closeAdvertisement() {
      this.advertisement.display_flag = 0;
    }
  },
  created() {
    this.getSildeAdvertisement();
    console.log("主页子栏目",this.homePageSubColumns)

  },

  beforeDestroy() {
    clearInterval(this.timeInveral);

  },
  beforeUnmount() {
    // 组件卸载前清除定时器
    clearInterval(this.timeInveral);

  },
  beforeRouteLeave(to, from, next) {
    // 在路由离开之前清除定时器
    clearInterval(this.timeInveral);
    next();
  }
};
</script>

<style scoped>
.alldiv {
  width: 100%;
  background-image: url("../assets/daimond_eyes.webp");
}

.allblock {
  margin: 0;
  width: 100%;
  align-content: center;
  padding: 10px 0px;

}

.homeinfoblock {
  padding-top: 1%;
  padding-left: 1%;
}

.firstline {
  height: 600px;
  width: 100%;
  margin-top: 1%;
}

.secondline {
  display: flex;
  width: 1470px;
  margin: 1% auto; /* 顶部保持1%，左右居中 */
  justify-content: center;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
}


#ad-image {
  object-fit: cover;
  z-index: 1000;
}

.ad-container {
  position: fixed;
  z-index: 1000;

}

.thirdline {
  display: flex;
  width: 1470px;
  margin: 1% auto; /* 顶部保持1%，左右居中 */
  justify-content: center;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
}

.fourthline{
  display: flex;
  width: 1470px;
  margin: 1% auto; /* 顶部保持1%，左右居中 */
  justify-content: center;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);

}

.fifthline{
  display: flex;
  width: 1470px;
  margin: 1% auto; /* 顶部保持1%，左右居中 */
  justify-content: center;
  box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
}


.Rotation {
  width: 100%;
  height: 60vh;


}

.segmentation {
  width: 100%;
  height: 150px;
}

.segmentation img {
  padding: 0 0;
  width: 100%; /* 图片宽度占满盒子 */
  height: 150px; /* 图片高度占满盒子 */
  object-fit: fill; /* 填充整个盒子，可能裁剪部分图片 */
}

.ad-inner {
  position: relative;
}
.close-button {
  position: absolute; /* 现在相对于 `.ad-inner` 来定位 */
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  /* 其余样式... */
}


</style>
